<script setup lang="ts">
import { getEntityType } from '../base'
import EntityTableView from './EntityTableView.vue'

const props = defineProps<{ type: string }>()

const emits = defineEmits<{
  (e: 'select', id: string | null): void
}>()

const typeName = getEntityType(props.type)!.typeName
const icon = `mas-icon-${props.type}`
</script>
<template>
  <div class="pane select-entity-pane">
    <div class="pane-heading">
      <div class="pane-title">
        <i :class="icon" />
        选择{{ typeName }}
      </div>
      <div class="pane-tool">
        <i class="mas-icon-close" @click="emits('select', null)" />
      </div>
    </div>
    <EntityTableView
      :type="type"
      :selectMode="true"
      @select="(id: string | null) => emits('select', id)"
    />
  </div>
</template>
